<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(10, 1fr); /* 10列平均 */
  grid-template-rows: auto 1fr auto; /* 第一行和最后一行自适应内容，中间行填充剩余空间 */
  grid-gap: 10px;
}

.grid-item {
  background-color: gray;
  padding: 20px;
}

.fill-row {
  grid-column: 1 / -1; /* 跨越整行所有列 */
  height: 100%;
}
</style>

<div class="grid-container">
  <div class="grid-item">Item 1</div> <!-- 第一行 -->
  <div class="fill-row"></div> <!-- 中间行，占据整行所有列 -->
  <div class="grid-item">Item 2</div> <!-- 最后一行 -->
</div>

